import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender from '@/render/TableRender'
import { ElButton, ElIcon,ElDialog } from 'element-plus'
import { Plus, Delete, Edit } from '@element-plus/icons-vue'
import type { VxeColumnSlotTypes } from 'vxe-table'
import type { LongInsuranceCaseListDto, ReportCaseResultDto } from '@/api/insurance/period/types'
import InterfaceConfigurationPop from './components/InterfaceConfigurationPop'
@Component
export class channelInsDetailView extends TableRender {
    isInterfacePop = false
    isDeletePop = false
    isOpenPop = false
    isClosePop = false
    tableColumnConfigOld = () => [
        {
            field: 'companyName',
            title: '规则名称',
        },
        {
            field: 'companyName',
            title: '推送地址',
        },
        {
            field: 'companyName',
            title: '适用名称',
        },
        {
            field: 'companyName',
            title: '是否启用',
        },
        {
            field: 'companyName',
            title: '创建人',
        },
        {
            field: 'companyName',
            title: '开户时间',
        },
        {
            title: '操作',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams<LongInsuranceCaseListDto<ReportCaseResultDto>>) => {
                    return (
                        <div class="flex items-center">
                            <div class="text-blue-light-100 mr-2 cursor-pointer" >
                                <ElIcon size="16" color="#565868"><Delete /></ElIcon>
                            </div>
                            <div class="text-blue-light-100 cursor-pointer" >
                                <ElIcon size="16" color="#565868"><Edit /></ElIcon>
                            </div>
                        </div>
                    )
                }
            }
        }
    ]

    // 删除接口配置
    onDelete() {
        this.isInterfacePop = true
    }

    render() { 
        return (
            <>
                <div class="w-full flex-none flex justify-between items-center px-24 py-20">
                    <div class="text-black-light-100 text-lg font-semibold">蓝工盾系统数据推送接口配置</div>
                    <ElButton onClick={ this.onDelete } color="#3E5FF5" class="flex items-center" type="primary">
                        <ElIcon class="mr-4" color="#fffffff"><Plus /></ElIcon>
                        <div >新建配置</div>
                    </ElButton>
                </div>
                <div class="flex-1">
                    {this.renderTable()}
                </div>
                <div class="flex-none">
                    {this.renderPager()}
                </div>

                {/* 新增配置弹窗 */}
                <InterfaceConfigurationPop
                    v-model:show={this.isInterfacePop}
                />

                <ElDialog
                    width={'480px'}
                    v-model={this.isDeletePop}
                    title="警告"
                    closeOnClickModal={true}
                    destroyOnClose={true}
                >
                    <div class="text-gray-light-600 text-base ">
						确定删除 <span class="text-[#DC1515] font-semibold">XX规则</span> 的接口配置吗？
                    </div>
                    <div class="flex justify-center mt-24">
                        <ElButton >取消</ElButton>
                        <ElButton type="primary">确定</ElButton>
                    </div>
                </ElDialog>
					
                <ElDialog
                    width={'480px'}
                    v-model={this.isOpenPop}
                    title="警告"
                    closeOnClickModal={true}
                    destroyOnClose={true}
                >
                    <div class="text-gray-light-600 text-base ">
						确定要 <span class="text-[#00D679] font-semibold">开启</span> 该接口数据吗
                    </div>
                    <div class="flex justify-center mt-24">
                        <ElButton >取消</ElButton>
                        <ElButton type="primary">确定</ElButton>
                    </div>
                </ElDialog>
				
                <ElDialog
                    width={'480px'}
                    v-model={this.isClosePop}
                    title="警告"
                    closeOnClickModal={true}
                    destroyOnClose={true}
                >
                    <div class="text-gray-light-600 text-base ">
                        <span class="text-[#DC1515] font-semibold">关闭</span>该接口数据，会导致数据无法及时推送和收到反馈，可能会遭到重大损失，请谨慎操作
                    </div>
                    <div class="flex justify-center mt-24">
                        <ElButton >取消</ElButton>
                        <ElButton type="primary">确定</ElButton>
                    </div>
                </ElDialog>
            </>
			
        )
    }
}

export default toNative<{}, {}>(channelInsDetailView)